<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>background-size</title>
<style>
	#div1{
		width:500px;
		height:300px;
		background:url(fd.png);
		background-size: 50%;
	}
	#div2{
		width:500px;
		height:300px;
		background:url(fd.png);
		background-size: contain;
	}
	#div3{
		width:500px;
		height:300px;
		background:url(fd.png);
		background-size: cover;
	}
</style>
	自定义有两个参数，指定背景图片的长款，若只指定一个参数，则视为两个参数相等，可以是百分数。
	contain： 图片会按照长宽比小的一个来适应，不足的部分会平铺。
	cover： 图片会自动按照长宽比大的一个来适应，多余的部分会被裁剪

</head>

css中较常用的单位(em/rem、vw/vh、vmin/vmax)
1、em/rem

如下如，em的大小，取决于自身的字体大小，并乘以em的倍数。

<div style="font-size:14px">em<!-- 14px  -->
	<span style="font-size:1.4em;">em<!-- (14*1.4)px  -->
		<span style="font-size:1.4em;">em<!-- (14*1.4*1.4)px  -->
			<span style="font-size:1.4em;">em<!-- (14*1.4*1.4*1.4)px  -->
				<span style="font-size:1.4em;">em<!-- (14*1.4*1.4*1.4*1.4)px  -->
				</span>
			</span>
		</span>
	</span>
</div>

比如做一个按钮

<button class="button">按钮</button>

<style>
	.button{
		width:4em;
		height:2em;
		font-size:14px;
	}
</style>
只需要改变字体大小，就能够改变按钮的大小。

用途，比如做一个自定义的组件
<div class="template">
	<header class="header">标题</header>
	<section class="section">正文</section>
	<button class="button">按钮</button>
</div>
<style>
	.template{
		font-size:24px;
		height:10em;
		width:20em;
		background:#eee;
		padding:0.6em;
		box-sizing:border-box;
	}
	.header{
		font-size: 2em;
		font-weight: bold;
	}
	.section{
		font-size:1.4em;
		height:2em;
	}
	.button{
		width:4em;
		height:2em;
		font-size:1.4em;
	}
</style>
接下来值需要改变字体的大小，内部的内容就会跟着自适应，感觉是还不是很哈皮。

缺点：em不适合嵌套太多层的组件否则每部每次都要计算父节点的大小，那就得不偿失了。

如下如，em的大小，取决于网页根节点的大小。
<div style="font-size:14px">rem
	<span style="font-size:1.4rem;">rem
		<span style="font-size:1.4rem;">rem
			<span style="font-size:1.4rem;">rem
				<span style="font-size:1.4rem;">rem
				</span>
			</span>
		</span>
	</span>
</div>

个人觉得一个网页用px还是用em还是用rem并不是什么需要纠结的问题，反正都不要钱，完全可以穿插着用，用适合的单位解决适合的问题。

2、vw/vh

vw/vh 当前视窗的1% w/h ->  100vw = 100视窗宽度  ||    100vh = 100视窗高度
<div style="background:#ccc;width:50vw;height:100px;">
</div>

比如，对初学者而言的一个问题，底部在页面超过屏幕时，自适应文档高度，在404等奇葩页面时，紧贴屏幕底部。

<body>
	<div class="main">main</div>
	<footer>footer</footer>
</body>
<style>
	body,html{
		padding:0;
		margin:0;
	}
	.main{
		min-height: 100vh;
		background:#ccc;
		width:100%;
	}
	footer{
		width:100%;
		height:100px;
		background:#333;
		color:#ccc;
		margin-top:-100px;
		bottom:0;
	}
</style>
缺点：这个底部的高度不能自适应，还有更多的解决方案，感兴趣的可以看这个

3、vmin/vmax

vmin/vmax 以当前窗口的最小/最大为百分比，
<div style="background:#ccc;width:50vw;height:100px;">
</div>
这个就不多说了，毕竟用的不太多，个人才疏学浅，暂时也没有用到。

另外还有ex和eh，具体没有了解太多，据说是基于字体的度量单位，依赖当前设定的字体，感兴趣的可以去问度娘。

<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
</body>
</html>